<template>
    <el-form label-width="80px" ref="form" :model="form">
        <el-form-item label="选择技能">
            <el-input v-model="form.course_id"></el-input>
        </el-form-item>
        <el-form-item label="完成度" prop="complete_percentage" :error="errors.complete_percentage">
            <el-input v-model.number="form.complete_percentage" min="0" max="100" clearable>
                <template slot="append">%</template>
            </el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">完成</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    // import SkillAutoCompleteField from "./SkillAutoCompleteField";

    export default {
        props: {skillId: {type: Number, required: true}, errors: {type: Object, required: true}},
        data() {
            return {
                form: {
                    course_id: null,
                    complete_percentage: 0,
                },
            }
        },
        methods: {
            onAutoCompleteSkillAttach(item) {
                this.form.course_id = item.id;
                console.log(item.id);
            }, onSubmit() {

                this.$emit('complete', {
                    id: this.form.course_id,
                    pivot: {complete_percentage: this.form.complete_percentage}
                });
            }
        },
        // components: {SkillAutoCompleteField}
    }
</script>

<style scoped>

</style>